<template>
    <div>
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="工具" title="理赔率看板" title1="涨幅梯度设置"></crumbs>
        </div>
        <div class="paddingbox">
            <div class="formbox">
                <div class="top">
                    <div class="toptext">筛选</div>
                    <div class="utils">
                        <div class="clear" @click="clearform">
                            <img src="../../assets/image/容器.png" alt="">
                            <span>清除</span>
                        </div>
                    </div>
                </div>
                <div class="formcontent">
                    <div class="formitem">
                        <div class="formitemflexone">
                            <div class="lable">梯度名称：</div>
                            <el-input @input="changegradientnamevalue" v-model="gradientnamevalue" clearable
                                placeholder="请输入梯度名称" />
                        </div>
                    </div>
                    <div class="formbtnitem">
                        <el-button type="primary" class="my_btn" @click="addgradienttcopen"><el-icon>
                                <Plus />
                            </el-icon>新增梯度</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="paddingbox">
            <div class="accounttable">
                <el-table :data="gradienttabledata" style="width: 100%; margin-top: 16px" height="550px" :header-cell-style="{
                    background: '#FAFAFC',
                    color: '#202536',
                }">
                    <el-table-column prop="name" label="梯度名称" />
                    <el-table-column prop="calcCycle" label="计算周期/月" />
                    <el-table-column label="涨幅率">
                        <template #default="scope">
                            <span>{{ (scope.row.increaseRate * 100 + '').replace(/\.\d+/g, '') }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="出险率">
                        <template #default="scope">
                            <span>{{ (scope.row.riskRate * 100 + '').replace(/\.\d+/g, '') }}%</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="提示文案" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <span class="blue pointer" @click="changegradienttcopen(scope.row)"
                                style="margin-right: 13px;">修改</span>
                            <span class="red pointer" @click="delgradient(scope.row.id)"
                                style="margin-right: 13px;">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paginationborder">
                    <pagination :total="gradienttotal" :currentPage="gradientcurrentPage" :pageSize="gradientpageSize"
                        @SizeChange="gradienthandleSizeChange" @CurrentChange="gradienthandleCurrentChange"></pagination>
                </div>
            </div>
        </div>
        <!-- 添加梯度 -->
        <el-dialog v-model="addgradienttc" title="新增保险梯度" width="500">
            <el-form ref="ruleFormRef" :model="addgradientform" label-position="top" :rules="addgradientformrules"
                label-width="100px" class="demo-ruleForm" status-icon>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="addgradientform.name" />
                </el-form-item>
                <el-form-item label="计算周期" prop="calcCycle">
                    <div class="addformbox">
                        <el-input style="width: 100%;" v-model="addgradientform.calcCycle" />
                        <div class="formboxtext">/月</div>
                    </div>
                </el-form-item>
                <el-form-item label="出险率高于" prop="riskRate">
                    <div class="addformbox">
                        <el-input style="width: 100%;" v-model="addgradientform.riskRate" />
                        <div class="formboxtext">/%</div>
                    </div>
                </el-form-item>
                <el-form-item label="涨价" prop="increaseRate">
                    <div class="addformbox">
                        <el-input style="width: 100%;" v-model="addgradientform.increaseRate" />
                        <div class="formboxtext">/%</div>
                    </div>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="addgradientform.remark" />
                </el-form-item>
            </el-form>
            <div class="btnflexbox">
                <el-button @click="resetForm(ruleFormRef)" class="my_calcelbtn">取消</el-button>
                <el-button @click="submitForm(ruleFormRef)" class="my_btn" type="primary">
                    确定
                </el-button>
            </div>
        </el-dialog>
        <!-- 修改梯度 -->
        <el-dialog v-model="changegradienttc" title="修改保险梯度" width="500">
            <el-form ref="changeruleFormRef" :model="changegradientform" label-position="top"
                :rules="changegradientformrules" label-width="100px" class="demo-ruleForm" status-icon>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="changegradientform.name" />
                </el-form-item>
                <el-form-item label="计算周期" prop="calcCycle">
                    <div class="addformbox">
                        <el-input style="width: 100%;" v-model="changegradientform.calcCycle" />
                        <div class="formboxtext">/月</div>
                    </div>
                </el-form-item>
                <el-form-item label="出险率高于" prop="riskRate">
                    <div class="addformbox">
                        <el-input style="width: 100%;" v-model="changegradientform.riskRate" />
                        <div class="formboxtext">/%</div>
                    </div>
                </el-form-item>
                <el-form-item label="涨价" prop="increaseRate">
                    <div class="addformbox">
                        <el-input style="width: 100%;" v-model="changegradientform.increaseRate" />
                        <div class="formboxtext">/%</div>
                    </div>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="changegradientform.remark" />
                </el-form-item>
            </el-form>
            <div class="btnflexbox">
                <el-button @click="changeresetForm(changeruleFormRef)" class="my_calcelbtn">取消</el-button>
                <el-button @click="changesubmitForm(changeruleFormRef)" class="my_btn" type="primary">
                    确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import crumbs from '../../components/crumbs.vue'
import { ref, reactive, computed, watch, onMounted,onActivated } from 'vue'
import { deldayinsuregradientapi, changedayinsuregradientapi, adddayinsuregradientapi, getdayinsuregradientapi } from '../../api/api'
import { useRoute, useRouter } from 'vue-router'
import { shake } from '../../utils/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
const router = useRouter()
const route = useRoute()
const ruleFormRef = ref<FormInstance>()
const changeruleFormRef = ref<FormInstance>()
onMounted(() => {
    getdayinsuregradient()
})
onActivated(() => {
    getdayinsuregradient()
})
const addgradientformrules = reactive<any>({
    name: [
        { required: true, message: '请输入梯度名称', trigger: 'blur' },
    ],
    calcCycle: [
        { required: true, message: '请输入计算周期', trigger: 'blur' },
    ],
    riskRate: [
        { required: true, message: '请输入出险率高于%', trigger: 'blur' },
    ],
    increaseRate: [
        { required: true, message: '请输入涨价%', trigger: 'blur' },
    ],
})
const changegradientformrules = reactive<any>({
    name: [
        { required: true, message: '请输入梯度名称', trigger: 'blur' },
    ],
    calcCycle: [
        { required: true, message: '请输入计算周期', trigger: 'blur' },
    ],
    riskRate: [
        { required: true, message: '请输入出险率高于%', trigger: 'blur' },
    ],
    increaseRate: [
        { required: true, message: '请输入涨价%', trigger: 'blur' },
    ],
})
const changedayinsuregradient = async () => {
    const res: any = await changedayinsuregradientapi({
        id: changegradientid.value,
        name: changegradientform.name,
        remark: changegradientform.remark,
        calcCycle: changegradientform.calcCycle,
        riskRate: changegradientform.riskRate,
        increaseRate: changegradientform.increaseRate
    })
    console.log(res, '修改梯度')
    if (res.code === 200) {
        ElMessage({
            type: 'success',
            message: '修改成功',
        })
        getdayinsuregradient()
        changeresetForm(changeruleFormRef.value)
        changegradienttc.value = false
    }
}
const adddayinsuregradient = async () => {
    const res: any = await adddayinsuregradientapi({
        name: addgradientform.name,
        remark: addgradientform.remark,
        calcCycle: addgradientform.calcCycle,
        riskRate: addgradientform.riskRate,
        increaseRate: addgradientform.increaseRate
    })
    console.log(res, '新增梯度')
    if (res.code === 200) {
        ElMessage({
            type: 'success',
            message: '添加成功',
        })
        getdayinsuregradient()
        addgradienttc.value = false
    }
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            adddayinsuregradient()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    addgradienttc.value = false
}
const changesubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            changedayinsuregradient()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const changeresetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    changegradienttc.value = false
}
const addgradientform = reactive({
    name: '',
    remark: '',
    calcCycle: '',
    riskRate: '',
    increaseRate: ''
})
const changegradientform = reactive({
    name: '',
    remark: '',
    calcCycle: '',
    riskRate: '',
    increaseRate: ''
})
const addgradienttcopen = () => {
    resetForm(ruleFormRef.value)
    addgradienttc.value = true
}
const addgradienttc = ref(false)
const deldayinsuregradient = async (id: number) => {
    const res: any = await deldayinsuregradientapi(id)
    console.log(res, '删除梯度')
    if (res.code === 200) {
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
        getdayinsuregradient()
    }
}
const delgradient = (val: number) => {
    ElMessageBox.confirm(
        '确定删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deldayinsuregradient(val)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
const changegradientid = ref(0)
const changegradienttcopen = (val: any) => {
    console.log(val)
    changegradientid.value = val.id
    changegradientform.name = val.name,
    changegradientform.remark = val.remark,
    changegradientform.calcCycle = val.calcCycle,
    changegradientform.riskRate = (val.riskRate * 100 + '').replace(/\.\d+/g, ''),
    changegradientform.increaseRate = (val.increaseRate * 100 + '').replace(/\.\d+/g, ''),
    changegradienttc.value = true
}
const changegradienttc = ref(false)
const changegradientnamevalue = () => {
    shake(getdayinsuregradient, 400)
}
const getdayinsuregradient = async () => {
    const res: any = await getdayinsuregradientapi({
        pageNum: gradientcurrentPage.value,
        pageSize: gradientpageSize.value,
        name: gradientnamevalue.value,
    })
    console.log(res, '日日保梯度列表')
    gradienttabledata.value = res.rows
    gradienttotal.value = res.total
}
const gradientnamevalue = ref('')
const clearform = () => {
    gradientnamevalue.value = ''
    getdayinsuregradient()
}
const gradienthandleCurrentChange = (val: any) => {
    gradientcurrentPage.value = val
    getdayinsuregradient()
}
const gradienthandleSizeChange = (val: any) => {
    gradientpageSize.value = val
    gradientcurrentPage.value = 1
    getdayinsuregradient()
}
const gradienttabledata = ref<any>([])
const gradientpageSize = ref(10)
const gradientcurrentPage = ref(1)
const gradienttotal = ref(0)
const back = () => {
    window.history.back()
}
</script>
<style lang="scss" scoped>
.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
}

.formbox {
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;

    .formcontent {
        padding: 0 12px 16px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .formbtnitem {
            margin-top: 13px;
        }

        .formitem {
            margin-top: 16px;
            display: flex;
            align-items: center;

            .formitemflexone {
                display: flex;
                align-items: center;
                flex: 1;
                margin-right: 42px;
            }

            .lable {
                min-width: 70px;
                font-size: 14px;
                color: #202536;
                margin-right: 8px;
            }
        }
    }

    .top {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 16px 8px;
        align-items: center;
        border-bottom: 1px solid #F4F4F7;

        .toptext {
            color: #3D3D3D;
            font-size: 14px;
        }

        .utils {
            display: flex;
            align-items: center;
        }

        .clear {
            cursor: pointer;
            margin-right: 20px;
            margin-left: 24px;
            color: #9497B1;
            font-size: 14px;

            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                margin-bottom: -3px;
            }
        }
    }
}

.accounttable {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
}

.red {
    color: red;
}

.blue {
    color: #3E5FF5;
}

.pointer {
    cursor: pointer;
}

.btnflexbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.addformbox {
    position: relative;
    width: 100%;

    .formboxtext {
        position: absolute;
        right: 40px;
        top: 0;
    }
}
</style>